$(function(){
    initCate()
    // 获取下拉菜单
    function initCate(){
        $.ajax({
            url:'/my/article/cates',
            success:function(res){
                if(res.status!==0){
                    return layui.layer.msg(res.message,{icon:5})
                }
                console.log(res);
                var htmlStr=template('tpl-cate',res)
                // console.log(htmlStr);
                $('select').html(htmlStr)
                // 更新渲染表单元素，因为动态插入到页面的
                layui.form.render()
            }
        })
    }
    /*-----------------------------------------*/ 
    // 初始化富文本编辑器
    initEditor()

    // 1. 初始化图片裁剪器
    var $image = $('#image')
    
    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }
    // 3. 初始化裁剪区域
    $image.cropper(options)
    /*------------------------------------------------------*/
    // 单击‘选择封面’按钮，弹出文件选择框
    $('#btnChooseImage').click(function(){
        // 触发文件选择框的click事件
        $('#coverFile').click()
    })
    // 用户选择了新文件，则更换图片裁剪区域
    $('#coverFile').change(function(){
        var fileList=this.files
        // 判断用户是否选择了文件
        if(fileList<=0){
            return layui.layer.msg('请选择文件',{icon:5})
        }
        var file = fileList[0]
        // 更换裁剪区域的图片
        var newImgURL = URL.createObjectURL(file)
        $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', newImgURL)  // 重新设置图片路径
        .cropper(options)        // 重新初始化裁剪区域
    })
    // ---------------------------------------------
    // 全局变量，保存文章状态值
    var state="已发布"
    // 如果单击了“存为草稿”按钮，变量state的值改为“草稿”
    $('#btnSave2').click(function(){
        state="草稿"
    })
    // ------------------------------------------------
    $('#form-pub').submit(function(e){
        e.preventDefault()
        // alert('ok')
        // var data=$(this).serialize()
        // var fd=new FormData(form表单对象dom元素)
        var fd=new FormData(this)
        // 追加文章状态的数据
        fd.append('state',state)
        // fd.forEach(function(value,item){
        //     console.log(value,item);
        // })
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function(blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 裁剪完毕之后，调用此回调函数，参数blob就是裁剪后的二进制文件
                fd.append('cover_img',blob)
                // fd.forEach(function(value,item){
                //     console.log(value,item);
                // })
                publishArticle(fd)
            })
    })
    // 封装一个调用发布文章接口的函数
    function publishArticle(fd){
        $.ajax({
            method:'post',
            url:'/my/article/add',
            data:fd,
            contentType:false,
            processData:false,
            success:function(res){
                if(res.status!==0){
                    return layui.layer.msg(res.message,{icon:5})
                }
                layui.layer.msg(res.message,{icon:6},function(){
                    // 跳转到文章列表
                    // location.href='/article/art_list.html'
                    // window.parent.document.getElementById('art-list').click()
                    window.parent.$('#art-list')[0].click()
                })
            }
            
        })
    }
})